:root {
  /* 主题基础色 */
  --theme-color: #7EE1C8;
  
  /* 背景色系列 */
  --bgc-color-1: color-mix(in srgb, var(--theme-color) 70%, black);  /* 暗 30% */
  --bgc-color-2: color-mix(in srgb, var(--theme-color) 80%, black);  /* 暗 20% */
  --slider-bgc: color-mix(in srgb, var(--theme-color) 85%, black);   /* 暗 15% */
  
  /* 文字色系列 */
  --primary-color: color-mix(in srgb, var(--theme-color) 20%, white);    /* 亮 80% */
  --secondary-color: color-mix(in srgb, var(--theme-color) 40%, white);  /* 亮 60% */
  --secondary-color-2: color-mix(in srgb, var(--theme-color) 60%, white);/* 亮 40% */
  --hover-color: var(--theme-color);
  
  /* 特殊效果 */
  --theme-gradient: linear-gradient(145deg, 
    color-mix(in srgb, var(--theme-color) 90%, white), 
    color-mix(in srgb, var(--theme-color) 90%, black)
  );
  
  /* 透明度变体 */
  --theme-shadow: color-mix(in srgb, var(--theme-color) 30%, transparent);
  --card-background: color-mix(in srgb, var(--theme-color) 30%, transparent);
  --container-background: color-mix(in srgb, var(--theme-color) 40%, transparent);
} 